<template>
  <div class="main" style="width: 100%;">
    <div class="main-search-body">

      <div class="float-right-nav">
        <a-anchor>
          <a-anchor-link href="#info">简历信息</a-anchor-link>
          <a-anchor-link href="#my_info">个人信息</a-anchor-link>
          <a-anchor-link href="#edu">教育背景</a-anchor-link>
          <a-anchor-link href="#expect">求职期望</a-anchor-link>
          <a-anchor-link href="#speak">自我描述</a-anchor-link>
        </a-anchor>
      </div>
      <div class="inside" style="margin:90px;margin-top: 40px;padding-bottom: 80px;">
        <p v-if="num==0" style="font-size: 32px;margin-bottom: 50px;" id="info">创建简历 </p>
        <p v-else style="font-size: 32px;margin-bottom: 50px;" id="info">修改简历 </p>

        <p class="p-title"><div class="blue"></div>简历信息</p>

        <div class="container">

          <div class="item item1">
            <p><span class="tips-must-do">*</span>附件简历</p>
            <el-upload
                v-model:file-list="fileList"
                action="http://localhost:8080/v1/file/upload"
                name="file"
                :limit="1"
                list-type="picture-card"
                style="text-align: center;"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <img v-if="dialogImageUrl" :src="BASE_URL+dialogImageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">只能上传jpg/png文件，且不超过50M</div>
              </template>
            </el-upload>
            <el-dialog v-model="dialogVisibleImg">
              < img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </div>
          <div class="item item2">
            <p><span class="tips-must-do">*</span>简历名称</p>
            <!--   输入框-->
            <el-form-item>
              <el-input placeholder="请输入简历名称" v-model="saveSeekerForm.resumeName"></el-input>
            </el-form-item>
          </div>
        </div>

        <p class="p-title" id="my_info"><div class="blue"></div>个人信息</p>
        <div class="container">
          <div class="item item1">
            <p><span class="tips-must-do">*</span>姓名</p>
            <el-form-item>
              <el-input placeholder="请填写姓名" v-model="saveSeekerForm.realName"></el-input>
            </el-form-item>
            <p><span class="tips-must-do">*</span>手机号</p>
            <el-form-item>
              <el-input placeholder="请填写手机号" v-model="saveSeekerForm.phone"></el-input>
            </el-form-item>

            <p><span class="tips-must-do">*</span>个人优势</p>
            <el-form-item>
              <el-input placeholder="请填写个人优势" v-model="saveSeekerForm.personalAdvantage"></el-input>
            </el-form-item>
            <p><span class="tips-must-do">*</span>身份</p>
            <el-form-items>
              <el-select placeholder="请选择身份" v-model="saveSeekerForm.identity">
                <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-items>
            <p><span class="tips-must-do">*</span>出生日期</p>
            <el-form-item>
              <div class="demo-datetime-picker">
                <div class="block">
                  <el-date-picker
                      v-model="saveSeekerForm.birthday"
                      type="date"
                      placeholder="请选择出生年月"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                  />
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="item item2">
            <p><span class="tips-must-do">*</span>性别</p>
            <el-form-item>
              <el-select placeholder="请选择性别" v-model="saveSeekerForm.gender">
                <el-option v-for="item in genderOptions" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <p><span class="tips-must-do">*</span>邮箱</p>
            <el-form-item>
              <el-input placeholder="请填写邮箱" v-model="saveSeekerForm.email"></el-input>
            </el-form-item>
            <p><span class="tips-must-do">*</span>微信号</p>
            <el-form-item>
              <el-input placeholder="请填写微信号" v-model="saveSeekerForm.wechatId"></el-input>
            </el-form-item>
            <p>城市</p>
            <el-form-item>
              <el-input placeholder="请输入所在城市" v-model="saveSeekerForm.birthdayPlace"></el-input>
            </el-form-item>
          </div>
        </div>

        <p class="p-title" id="edu" style="margin-top: 30px;"><div class="blue"></div>教育背景</p>
        <div class="container">
          <div class="item item1">
            <p><span class="tips-must-do">*</span>学校名称</p>
            <el-form-item>
              <el-input placeholder="请填写学校名称" v-model="saveSeekerForm.school1"></el-input>
            </el-form-item>
            <p><span class="tips-must-do">*</span>专业名称</p>
            <el-form-item>
              <el-input placeholder="请填写专业名称" v-model="saveSeekerForm.major"></el-input>
            </el-form-item>
            <p>学位</p>
            <el-form-item>
              <el-select placeholder="请选择学位" v-model="saveSeekerForm.degree">
                <el-option v-for="item in degreeOptions" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item item2">
            <p><span class="tips-must-do">*</span>毕业时间</p>
            <el-form-item>
              <div class="demo-datetime-picker">
                <div class="block">
                  <el-date-picker
                      v-model="saveSeekerForm.graduateTime"
                      type="date"
                      placeholder="请选择毕业时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                  />
                </div>
              </div>
            </el-form-item>
            <p>学校所在地</p>
            <el-form-item>
              <el-input placeholder="请填写学校所在地" v-model="saveSeekerForm.school2"></el-input>
            </el-form-item>
            <p><span class="tips-must-do">*</span>教育背景</p>
            <el-form-item label="教育背景">
              <el-input placeholder="请输入教育背景" v-model="saveSeekerForm.educationBackground"></el-input>
            </el-form-item>
          </div>
        </div>

        <p class="p-title" id="expect" style="margin-top: 30px;"><div class="blue"></div>求职期望</p>
        <div class="container">
          <div class="item item1">
            <p>求职状态</p>
            <el-form-item>
              <el-select placeholder="请选择求职状态" v-model="saveSeekerForm.lookforStatus">
                <el-option v-for="item in lookOptions" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <p>期望城市</p>
            <el-form-item>
              <el-input placeholder="请输入期望城市" v-model="saveSeekerForm.expectedCity"></el-input>
            </el-form-item>
            <p>最低期望薪资</p>
            <el-form-item>
              <el-input placeholder="请输入最低期望薪资" v-model="saveSeekerForm.expectedSalaryMin"></el-input>
            </el-form-item>
          </div>
          <div class="item item2">
            <p>期望岗位</p>
            <el-form-item>
              <el-input placeholder="请输入期望岗位" v-model="saveSeekerForm.expectedJob"></el-input>
            </el-form-item>
            <p>雇佣类型</p>
            <el-form-item>
              <el-select placeholder="请选择求职状态" v-model="saveSeekerForm.employmentType">
                <el-option v-for="item in OptionEmployment" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <p>最高期望薪资</p>
            <el-form-item>
              <el-input placeholder="请输入最高期望薪资" v-model="saveSeekerForm.expectedSalaryMax"></el-input>
            </el-form-item>
          </div>
        </div>

        <p class="p-title" id="speak" style="margin-top: 30px;"><div class="blue"></div>自我描述</p>
        <div class="container">
          <el-input
              v-model="saveSeekerForm.intro"
              style="width: 95%;margin-top: 20px;"
              :rows="10"
              type="textarea"
              placeholder="请填写自我描述"
          />
        </div>
        <el-form-item style="float:right;width: 150px;">
          <el-button @click="onSubmit" round style="color: #6c4295" size="large">提交</el-button>
        </el-form-item>
      </div>

    </div>
    <el-button @click="onSubmit2" round style="color: #6c4295" size="large">测试</el-button>
  </div>
</template>

<script setup>
// 备注：school1表示学校名称,school2表示学校所在地,
//准备对象用来收集新增/修改简历的表单信息
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";

const router = useRouter();
const num = ref();
const id = ref(0);
const dialogVisible = ref(true);
const user = ref(getUser());
//求职状态
const lookOptions = ref([
  {label: '积极求职中',value: '积极求职中'},
  {label: '正在准备面试',value: '正在准备面试'},
  {label: '已拿到offer',value: '已拿到offer'},
  {label: '已投递简历',value: '已投递简历'},
])

//雇佣类型
const OptionEmployment = ref([
  {label: '全职',value: '全职'},
  {label: '兼职',value: '兼职'},
  {label: '实习',value: '实习'},
])
//用户职业
const levelOptions = ref([
  {label: '在校生',value: '在校生'},
  {label: '应届毕业生',value: '应届毕业生'},
])

//用户学位
const degreeOptions = ref([
  {label: '学士',value: '学士'},
  {label: '硕士',value: '硕士'},
  {label: '博士',value: '博士'},
  {label: '博士后',value: '博士后'},
])

//性别
const genderOptions = ref([
  {label: '男',value: '男'},
  {label: '女',value: '女'},
])

const saveSeekerForm = ref({
  id:0,
  userId:0,
  identity: '',
  resumeName:'',
  realName:'',
  phone:'',
  birthday:'',
  gender:'',
  personalAdvantage:'',
  email:'',
  wechatId:'',
  graduateTime: '',
  birthdayPlace:'',
  school1:'',
  school2:'',
  lookforStatus:'',
  expectedJob: '',
  expectedCity:'',
  expectedSalaryMin:0,
  expectedSalaryMax:0,
  employmentType:'',
  educationBackground:'',
  major:'',
  degree:'',
  availableStartDate:'',
  intro:'',
  resumeFile:''
});

//页面一加载立即调用
onMounted(() => {
  const query = router.currentRoute.value.query;
  num.value = query.num || 0;
  console.log("操作num："+num.value);
  id.value = query.id || -1;
  saveSeekerForm.value.userId = user.value.userId;
  console.log("userid-------------"+saveSeekerForm.value.userId);
  loadSeeker(id.value);//加载员工列表
  console.log(saveSeekerForm);
})
/**图片上传相关代码开始**/
let fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisibleImg = ref(false);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们上传的图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('删除成功!');
    }
  })

}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogVisibleImg.value = true;
  console.log(uploadFile);
}
/**图片上传相关代码结束**/
//通过userId查询user表、seeker表里面的信息填入saveSeekerForm内，然后自动显示在input里边
const loadSeeker = (id) => {
  let userId = user.value.userId;
  if(num.value==0){
    //要创建简历
    console.log("userid==========================="+userId);
    axios.post(BASE_URL+'/v1/user/resumeA/selectByUserId/'+userId).then((response) => {
      if (response.data.code === 2000) {
        saveSeekerForm.value = response.data.data[0];
        console.log("基本查找："+saveSeekerForm.value);
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }else{
    //要修改简历
    axios.post(BASE_URL+'/v1/user/resumeA/selectById/'+id+'/'+userId)
        .then((response) => {
          if(response.data.code == 2000){
            saveSeekerForm.value = response.data.data[0];
            console.log("特殊查找："+saveSeekerForm);
          }else{
            // ElMessage.error(response.data.msg);
          }
        })
  }

}

const onSubmit2 = ()=>{
  router.push({ path: 'LResume', query: { id:1, num:1} });
}

const onSubmit = () => {
  console.log('submit!')
  if (fileList.value.length==0){
    ElMessage.error("请上传图片!");
    return;
  }

  console.log(fileList)
  saveSeekerForm.value.resumeFile=fileList.value[0].response.data;
  let data = qs.stringify({
    "id":saveSeekerForm.value.id,
    "userId":saveSeekerForm.value.userId,
    "identity":saveSeekerForm.value.identity,
    "resumeName":saveSeekerForm.value.resumeName,
    "realName":saveSeekerForm.value.realName,
    "phone":saveSeekerForm.value.phone,
    "birthday":saveSeekerForm.value.birthday,
    "gender":saveSeekerForm.value.gender,
    "personalAdvantage":saveSeekerForm.value.personalAdvantage,
    "email":saveSeekerForm.value.email,
    "wechatId":saveSeekerForm.value.wechatId,
    "graduateTime":saveSeekerForm.value.graduateTime,
    "birthdayPlace":saveSeekerForm.value.birthdayPlace,
    "school1":saveSeekerForm.value.school1,
    "school2":saveSeekerForm.value.school2,
    "lookforStatus":saveSeekerForm.value.lookforStatus,
    "expectedJob":saveSeekerForm.value.expectedJob,
    "expectedCity":saveSeekerForm.value.expectedCity,
    "expectedSalaryMin":saveSeekerForm.value.expectedSalaryMin,
    "expectedSalaryMax":saveSeekerForm.value.expectedSalaryMax,
    "employmentType":saveSeekerForm.value.employmentType,
    "educationBackground":saveSeekerForm.value.educationBackground,
    "major":saveSeekerForm.value.major,
    "degree":saveSeekerForm.value.degree,
    "availableStartDate":saveSeekerForm.value.availableStartDate,
    "intro":saveSeekerForm.value.intro,
    "resumeFile":saveSeekerForm.value.resumeFile
  });
  console.log("cccccccccccccccccccccccc");

  console.log(data);
  axios.post(BASE_URL + '/v1/user/resumeA/save', data).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      saveSeekerForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadSeeker();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>
.container {
  display: flex;
  width: 88%;
}

.item {
  line-height: 30px;
  margin-right: 40px;
}

.item1 {
  flex: 1; /* 设置为2，表示占据2份空间 */
}

.item2 {
  flex: 1; /* 设置为1，表示占据1份空间 */
}

.tips-must-do{
  color: #ec3737;
  font-size: 25px;
}

p{
  color: #494949;
}

.p-title{
  font-size: 20px;
}

.blue{
  height: 18px;
  width: 6px;
  background-color: #57068c;
  margin-right: 7px;
  display: inline-block;
}

.float-right-nav{
  position: fixed;
  right: 11vw;
  background-coor: #ffffff;
  box-shadow: 3px 2px 10px 2px rgba(115, 115, 115, 0.2);
  border-radius: 10px;
}

.main {
  background: linear-gradient(to top, #f3f3f3, #efefff);
  padding-top:30px ;
}

.main-search-body {
  width: 85vw;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 30px;
  padding-top: 1px;
}

.el-upload__tip{
  font-size: 15px;
}
</style>